<template>
  <div>
    <h2 style="padding-left: 20px;">简约计算器</h2>
    <div class="container calculator-wrapper">
      <div class="display">
        <input type="text" v-model="displayValue" readonly />
      </div>
      <div class="buttons">
        <button v-for="btn in buttonConfigs" :key="btn.value" @click="handleButtonClick(btn.value)">
          {{ btn.label }}
        </button>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue';
import * as math from 'mathjs'; // 引入mathjs库

// 按钮配置，包含括号等，每个对象包含显示的标签（label）和对应的实际值（value）
const buttonConfigs = [
  { label: '7', value: '7' },
  { label: '8', value: '8' },
  { label: '9', value: '9' },
  { label: '/', value: '/' },
  { label: '4', value: '4' },
  { label: '5', value: '5' },
  { label: '6', value: '6' },
  { label: '*', value: '*' },
  { label: '1', value: '1' },
  { label: '2', value: '2' },
  { label: '3', value: '3' },
  { label: '-', value: '-' },
  { label: '0', value: '0' },
  { label: '.', value: '.' },
  { label: '(', value: '(' },
  { label: ')', value: ')' },
  { label: '=', value: '=' },
  { label: '+', value: '+' },
  { label: 'C', value: 'C' },
];

// 用于显示计算内容的响应式数据
const displayValue = ref('');
// 存储第一个操作数
const firstOperand = ref('');
// 存储操作符
const operator = ref('');

const calculated = ref(false)

// 处理按钮点击事件，增加对括号的处理逻辑
const handleButtonClick = (value) => {
  switch (value) {
    case 'C':
      clearDisplay();
      break;
    case '=':
      calculate();
      break;
    case '+':
    case '-':
    case '*':
    case '/':
      handleOperator(value);
      break;
    case '(':
    case ')':
      appendToDisplay(value);
      break;
    default:
      if(calculated.value){
        displayValue.value = '';
        calculated.value = false;
      }
      appendToDisplay(value);
      break;
  }
};

// 添加数字、小数点或括号到显示框，优化添加数字逻辑，处理开头0及单独小数点情况
const appendToDisplay = (value) => {
  if (value === '0' && displayValue.value === '') {
    // 如果当前输入是0且显示框为空，添加0，以支持输入单独的0
    displayValue.value += value;
    return;
  }
  if (value === '0' && displayValue.value.startsWith('0') && displayValue.value.length > 1) {
    // 如果当前输入是0且显示框内容已以0开头且长度大于1（避免去掉单个0的情况），不添加这个0，避免出现多个连续0开头
    return;
  }
  if (value === '.' && displayValue.value === '') {
    // 如果当前输入是小数点且显示框为空，添加0.，确保能正常输入小数开头情况
    displayValue.value = '0.';
    return;
  }
  displayValue.value += value;
};

// 处理操作符相关逻辑，更新为拼接操作符到显示值，形成完整计算式
const handleOperator = (op) => {
  if (displayValue.value) {
    firstOperand.value = displayValue.value;
    operator.value = op;
    displayValue.value += ` ${op} `;
  }
};

// 清除显示框内容
const clearDisplay = () => {
  displayValue.value = '';
  firstOperand.value = '';
  operator.value = '';
};

// 执行计算的函数，优化结果展示，去除小数末尾多余的零
const calculate = () => {
  if (displayValue.value) {
    try {
      const result = math.evaluate(displayValue.value);
      if (Number.isInteger(result)) {
        displayValue.value = result.toString();
      } else {
        // 根据需求设置合适的小数位数，这里设置为10位小数，可按需调整
        let formattedResult = result.toFixed(10);
        // 去除末尾多余的零
        formattedResult = parseFloat(formattedResult).toString();
        displayValue.value = formattedResult;
      }
      calculated.value = true;
    } catch (error) {
      displayValue.value = 'Error';
    }
  }
};
</script>

<style scoped lang="scss">
@use "../assets/common.scss";

.calculator-wrapper {
  width: 240px;
}

.display {
  background-color: #f4f4f4;
  padding: 10px;
  display: flex;
}

.display input {
  width: 100%;
  font-size: 20px;
  border: none;
  outline: none;
  padding-right: 10px;
  text-align: right;
  height: 36px;
  line-height: 36px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 10px;
}

button {
  padding: 15px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background-color: #e9ecef;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #d3d6d8;
}
</style>